<template>
    <BaseContent>
        <div class="row justify-content-md-center">
            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="请输入图书名称" v-model="book_title">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="请输入图书作者" v-model="book_author">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="请输入出版社" v-model="book_publisher">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="请输入上架数量" v-model="book_count">
                        </div>
                        <div class="mb-3">
                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="请输入动态简介" v-model="book_description"></textarea>
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="请输入图书插图地址" v-model="book_photo">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="请输入图书资源地址" v-model="book_website">
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control" placeholder="请输入图书出版时间" v-model="book_publication">
                        </div>
                        <div class="input-group mb-3">
                            <label class="input-group-text" for="inputGroupSelect01">图书类型</label>
                            <select class="form-select" id="inputGroupSelect01" v-model="book_type">
                                <option value="文学">文学</option>
                                <option value="历史">历史</option>
                                <option value="法律">法律</option>
                                <option value="财经">财经</option>
                                <option value="科技">科技</option>
                            </select>
                        </div>
                        <div class="input-group mb-3">
                            <label class="input-group-text" for="inputGroupSelect01">豆瓣评称</label>
                            <select class="form-select" id="inputGroupSelect01" v-model="book_awarded">
                                <option value="神作">神作</option>
                                <option value="潜力">潜力</option>
                                <option value="值得一读">值得一读</option>
                                <option value="脍炙人口">脍炙人口</option>
                                <option value="褒贬不一">褒贬不一</option>
                                <option value="评论不足">评论不足</option>
                            </select>
                        </div>
                        <div class="error_info">{{ error_info }}</div>
                        <button type="button" class="btn btn-success" @click="confirm_submit">确认上架</button>
                    </div>
                </div>
            </div>
        </div>
    </BaseContent>
</template>

<script>
import BaseContent from '@/components/BaseContent.vue';
import { ref } from 'vue';
import $ from 'jquery';
export default {
    name: "LaunchBookView",
    components: {
        BaseContent
    },
    setup() {
        const book_title = ref('');
        const book_author = ref('');
        const book_publisher = ref('');
        const book_count = ref('');
        const book_description = ref('');
        const book_photo = ref('');
        const book_website = ref('');
        const book_publication = ref('');
        const book_type = ref('');
        const book_awarded = ref('');
        const book_score = ref(0);
        const error_info = ref('');

        const confirm_submit = () => {
            error_info.value = "";
            $.ajax({
                url: "http://47.121.28.202:8000/settings/getbooks/",
                type: "POST",
                data: {
                    title: book_title.value,
                    photo: book_photo.value,
                    publication_date: book_publication.value,
                    description: book_description.value,
                    author: book_author.value,
                    book_type: book_type.value,
                    stock: parseInt(book_count.value),
                    publisher: book_publisher.value,
                    awarded: book_awarded.value,
                    score: 0, 
                    website: book_website.value
                },
                success(resp) {
                    if (resp.result === 'success') {
                        book_title.value = "";
                        book_photo.value = "";
                        book_publication.value = "";
                        book_description.value = "";
                        book_author.value = "";
                        book_type.value = "";
                        book_count.value = "";
                        book_publisher.value = "";
                        book_awarded.value = "";
                        book_score.value = "";
                        book_website.value = "";
                        $.ajax({
                            url: "http://47.121.28.202:8000/settings/getbooks/",
                            type: "GET",
                        })
                    }
                    else {
                        error_info.value = resp.result;
                    }
                }
            })
        }

        return {
            book_title,
            book_author,
            book_publisher,
            book_count,
            book_description,
            book_photo,
            book_website,
            book_publication,
            book_type,
            book_awarded,
            error_info,
            confirm_submit
        }
    }
}
</script>

<style scoped>
.error_info {
    color: red;
}
</style>